<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工数据分析系统</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100%;
            overflow: hidden;
        }
        .auth-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        }
        .auth-box {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 300px;
            max-width: 90%;
        }
        .auth-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #666;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .btn-auth {
            width: 100%;
            padding: 10px;
            background: #2575fc;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        .btn-auth:hover {
            background: #0d5bd8;
        }
        .auth-toggle {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }
        .auth-toggle button {
            background: none;
            border: none;
            color: #2575fc;
            cursor: pointer;
            padding: 0;
            text-decoration: underline;
        }
        .app-container {
            display: none;
            height: 100vh;
            flex-direction: column;
        }
        .header {
            background: #2575fc;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 20px;
            font-weight: bold;
        }
        .logout-btn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 14px;
        }
        .main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        .sidebar {
            width: 220px;
            background: #f5f7fa;
            border-right: 1px solid #e0e0e0;
            overflow-y: auto;
        }
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar-menu li {
            padding: 15px 20px;
            cursor: pointer;
            border-bottom: 1px solid #e0e0e0;
            transition: background 0.3s;
        }
        .sidebar-menu li:hover {
            background: #e6e9ec;
        }
        .sidebar-menu li.active {
            background: #d0d8e0;
            font-weight: bold;
        }
        .content-area {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #ffffff;
        }
        .page-title {
            margin-top: 0;
            color: #333;
        }
        .chart-container {
            margin-bottom: 20px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
        }
        .table-container {
            margin-top: 20px;
            overflow-x: auto;
        }
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        .data-table th, .data-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
        .data-table th {
            background: #f5f7fa;
            font-weight: bold;
        }
        .btn {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 5px;
            transition: background 0.3s;
        }
        .btn-add {
            background: #4CAF50;
            color: white;
        }
        .btn-add:hover {
            background: #388e3c;
        }
        .btn-edit {
            background: #ffc107;
            color: black;
        }
        .btn-edit:hover {
            background: #ffb300;
        }
        .btn-delete {
            background: #f44336;
            color: white;
        }
        .btn-delete:hover {
            background: #d32f2f;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 400px;
            max-width: 90%;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover, .close:focus {
            color: black;
            text-decoration: none;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
            box-sizing: border-box;
        }
        .btn-save {
            background: #2575fc;
            color: white;
        }
        .btn-save:hover {
            background: #0d5bd8;
        }
        .alert {
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 3px;
            display: none;
        }
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .error-message {
            color: #f44336;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div class="auth-container" id="loginContainer">
        <div class="auth-box">
            <h2 class="auth-title">员工数据分析系统 - 登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" required>
                    <div class="error-message" id="loginUsernameError"></div>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" required>
                    <div class="error-message" id="loginPasswordError"></div>
                </div>
                <button type="submit" class="btn-auth">登录</button>
                <div class="auth-toggle">
                    还没有账号？<button type="button" id="showRegister">立即注册</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册页面 -->
    <div class="auth-container" id="registerContainer" style="display: none;">
        <div class="auth-box">
            <h2 class="auth-title">员工数据分析系统 - 注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" required>
                    <div class="error-message" id="registerUsernameError"></div>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" required>
                    <div class="error-message" id="registerPasswordError"></div>
                </div>
                <div class="form-group">
                    <label for="registerConfirmPassword">确认密码</label>
                    <input type="password" id="registerConfirmPassword" required>
                    <div class="error-message" id="registerConfirmPasswordError"></div>
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" required>
                    <div class="error-message" id="registerEmailError"></div>
                </div>
                <button type="submit" class="btn-auth">注册</button>
                <div class="auth-toggle">
                    已有账号？<button type="button" id="showLogin">立即登录</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 应用主界面 -->
    <div class="app-container" id="appContainer">
        <header class="header">
            <div class="logo">员工数据分析系统</div>
            <div>
                <span id="currentUser"></span>
                <button class="logout-btn" id="logoutBtn">
                    <i class="fa fa-sign-out"></i> 退出登录
                </button>
            </div>
        </header>
        
        <div class="main-content">
            <!-- 侧边栏菜单 -->
            <div class="sidebar">
                <ul class="sidebar-menu" id="sidebarMenu">
                    <li data-page="dashboard" class="active">
                        <i class="fa fa-dashboard"></i> 数据概览
                    </li>
                    <li data-page="scatter2d">
                        <i class="fa fa-dot-circle-o"></i> 二维散点图
                    </li>
                    <li data-page="scatter3d">
                        <i class="fa fa-cube"></i> 三维散点图
                    </li>
                    <li data-page="linechart">
                        <i class="fa fa-line-chart"></i> 折线图
                    </li>
                    <li data-page="table">
                        <i class="fa fa-table"></i> 员工数据管理
                    </li>
                </ul>
            </div>
            
            <!-- 内容区域 -->
            <div class="content-area" id="contentArea">
                <!-- 数据概览页面 -->
                <div class="page" id="dashboardPage">
                    <h1 class="page-title">数据概览</h1>
                    <div class="chart-container">
                        <h3>员工技能评分分布</h3>
                        <div id="dashboardChart" style="height: 400px;"></div>
                    </div>
                </div>
                
                <!-- 二维散点图页面 -->
                <div class="page" id="scatter2dPage" style="display: none;">
                    <h1 class="page-title">二维散点图</h1>
                    <div class="chart-container">
                        <h3>员工评分分布</h3>
                        <div id="scatter2dChart" style="height: 400px;"></div>
                    </div>
                </div>
                
                <!-- 三维散点图页面 -->
                <div class="page" id="scatter3dPage" style="display: none;">
                    <h1 class="page-title">三维散点图</h1>
                    <div class="chart-container">
                        <h3>员工综合能力分析</h3>
                        <div id="scatter3dChart" style="height: 400px;"></div>
                    </div>
                </div>
                
                <!-- 折线图页面 -->
                <div class="page" id="linechartPage" style="display: none;">
                    <h1 class="page-title">折线图</h1>
                    <div class="chart-container">
                        <h3>员工评分趋势</h3>
                        <div id="lineChart" style="height: 400px;"></div>
                    </div>
                </div>
                
                <!-- 数据表格页面 -->
                <div class="page" id="tablePage" style="display: none;">
                    <h1 class="page-title">员工数据管理</h1>
                    <button class="btn btn-add" id="addBtn">
                        <i class="fa fa-plus"></i> 添加员工
                    </button>
                    <div class="alert alert-success" id="successAlert">
                        操作成功!
                    </div>
                    <div class="alert alert-error" id="errorAlert">
                        操作失败，请检查输入!
                    </div>
                    <div class="table-container">
                        <table class="data-table" id="employeeTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>部门</th>
                                    <th>技能评分</th>
                                    <th>效率评分</th>
                                    <th>协作评分</th>
                                    <th>入职日期</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                                <!-- 数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加/编辑模态框 -->
    <div class="modal" id="employeeModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">添加员工</h3>
                <span class="close" id="closeModal">&times;</span>
            </div>
            <form id="employeeForm">
                <input type="hidden" id="editId">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" required>
                </div>
                <div class="form-group">
                    <label for="age">年龄</label>
                    <input type="number" id="age" required>
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select id="gender" required>
                        <option value="M">男</option>
                        <option value="F">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="department">部门</label>
                    <select id="department" required>
                        <option value="产品设计">产品设计</option>
                        <option value="前端开发">前端开发</option>
                        <option value="数据分析">数据分析</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="skill">技能评分</label>
                    <input type="number" id="skill" min="0" max="100" required>
                </div>
                <div class="form-group">
                    <label for="efficiency">效率评分</label>
                    <input type="number" id="efficiency" min="0" max="100" required>
                </div>
                <div class="form-group">
                    <label for="collaboration">协作评分</label>
                    <input type="number" id="collaboration" min="0" max="100" required>
                </div>
                <div class="form-group">
                    <label for="hireDate">入职日期</label>
                    <input type="date" id="hireDate" required>
                </div>
                <button type="submit" class="btn btn-save">保存</button>
            </form>
        </div>
    </div>

    <script>
        // 模拟用户数据（实际应用中应存储在服务器数据库）
        let users = [
            { username: "admin", password: "admin123", email: "admin@example.com" }
        ];

        // 当前登录用户
        let currentUser = null;

        // 员工数据
        let employees = [
            { id: 1, name: "Alice", age: 22, gender: "F", department: "产品设计", skill: 78, efficiency: 85, collaboration: 92, hireDate: "2024-06-01" },
            { id: 2, name: "Bob", age: 24, gender: "M", department: "前端开发", skill: 88, efficiency: 76, collaboration: 81, hireDate: "2024-06-01" },
            { id: 3, name: "Charlie", age: 23, gender: "M", department: "数据分析", skill: 90, efficiency: 89, collaboration: 87, hireDate: "2024-06-02" },
            { id: 4, name: "Diana", age: 25, gender: "F", department: "前端开发", skill: 82, efficiency: 91, collaboration: 84, hireDate: "2024-06-02" },
            { id: 5, name: "Eric", age: 21, gender: "M", department: "产品设计", skill: 76, efficiency: 80, collaboration: 79, hireDate: "2024-06-03" },
            { id: 6, name: "Fiona", age: 22, gender: "F", department: "数据分析", skill: 85, efficiency: 88, collaboration: 86, hireDate: "2024-06-03" },
            { id: 7, name: "George", age: 24, gender: "M", department: "前端开发", skill: 93, efficiency: 90, collaboration: 91, hireDate: "2024-06-04" },
            { id: 8, name: "Helen", age: 23, gender: "F", department: "产品设计", skill: 72, efficiency: 70, collaboration: 75, hireDate: "2024-06-04" },
            { id: 9, name: "Ian", age: 25, gender: "M", department: "数据分析", skill: 87, efficiency: 85, collaboration: 90, hireDate: "2024-06-05" },
            { id: 10, name: "Judy", age: 22, gender: "F", department: "前端开发", skill: 95, efficiency: 92, collaboration: 94, hireDate: "2024-06-05" }
        ];

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 登录表单提交
            document.getElementById('loginForm').addEventListener('submit', function(e) {
                e.preventDefault();
                const username = document.getElementById('loginUsername').value;
                const password = document.getElementById('loginPassword').value;
                
                // 验证登录信息
                const user = users.find(u => u.username === username && u.password === password);
                
                if (user) {
                    currentUser = user;
                    document.getElementById('currentUser').textContent = `欢迎，${currentUser.username} `;
                    document.getElementById('loginContainer').style.display = 'none';
                    document.getElementById('appContainer').style.display = 'flex';
                    initDashboard();
                    initTable();
                } else {
                    showError('loginUsernameError', '用户名或密码不正确');
                    showError('loginPasswordError', '用户名或密码不正确');
                }
            });
            
            // 注册表单提交
            document.getElementById('registerForm').addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = true;
                
                const username = document.getElementById('registerUsername').value;
                const password = document.getElementById('registerPassword').value;
                const confirmPassword = document.getElementById('registerConfirmPassword').value;
                const email = document.getElementById('registerEmail').value;
                
                // 验证用户名
                if (username.length < 3) {
                    showError('registerUsernameError', '用户名至少需要3个字符');
                    isValid = false;
                } else if (users.some(u => u.username === username)) {
                    showError('registerUsernameError', '用户名已存在');
                    isValid = false;
                } else {
                    hideError('registerUsernameError');
                }
                
                // 验证密码
                if (password.length < 6) {
                    showError('registerPasswordError', '密码至少需要6个字符');
                    isValid = false;
                } else {
                    hideError('registerPasswordError');
                }
                
                // 验证确认密码
                if (password !== confirmPassword) {
                    showError('registerConfirmPasswordError', '两次输入的密码不一致');
                    isValid = false;
                } else {
                    hideError('registerConfirmPasswordError');
                }
                
                // 验证邮箱
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    showError('registerEmailError', '请输入有效的邮箱地址');
                    isValid = false;
                } else if (users.some(u => u.email === email)) {
                    showError('registerEmailError', '该邮箱已被注册');
                    isValid = false;
                } else {
                    hideError('registerEmailError');
                }
                
                // 如果验证通过，创建新用户
                if (isValid) {
                    const newUser = { username, password, email };
                    users.push(newUser);
                    
                    // 注册成功后自动登录
                    currentUser = newUser;
                    document.getElementById('currentUser').textContent = `欢迎，${currentUser.username} `;
                    document.getElementById('registerContainer').style.display = 'none';
                    document.getElementById('appContainer').style.display = 'flex';
                    initDashboard();
                    initTable();
                    
                    // 重置表单
                    document.getElementById('registerForm').reset();
                }
            });
            
            // 切换到注册页面
            document.getElementById('showRegister').addEventListener('click', function() {
                document.getElementById('loginContainer').style.display = 'none';
                document.getElementById('registerContainer').style.display = 'flex';
                clearAuthErrors();
            });
            
            // 切换到登录页面
            document.getElementById('showLogin').addEventListener('click', function() {
                document.getElementById('registerContainer').style.display = 'none';
                document.getElementById('loginContainer').style.display = 'flex';
                clearAuthErrors();
            });
            
            // 输入框变化时清除错误提示
            document.querySelectorAll('#loginForm input, #registerForm input').forEach(input => {
                input.addEventListener('input', function() {
                    const errorId = this.id + 'Error';
                    hideError(errorId);
                });
            });
            
            // 退出登录
            document.getElementById('logoutBtn').addEventListener('click', function() {
                currentUser = null;
                document.getElementById('appContainer').style.display = 'none';
                document.getElementById('loginContainer').style.display = 'flex';
                document.getElementById('loginForm').reset();
                clearAuthErrors();
            });
            
            // 侧边栏菜单切换
            const sidebarItems = document.querySelectorAll('#sidebarMenu li');
            sidebarItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有活动状态
                    sidebarItems.forEach(i => i.classList.remove('active'));
                    // 添加当前活动状态
                    this.classList.add('active');
                    
                    // 显示对应页面
                    const pageId = this.getAttribute('data-page') + 'Page';
                    document.querySelectorAll('.page').forEach(page => {
                        page.style.display = 'none';
                    });
                    document.getElementById(pageId).style.display = 'block';
                    
                    // 根据页面初始化图表
                    if (pageId === 'dashboardPage') {
                        initDashboard();
                    } else if (pageId === 'scatter2dPage') {
                        initScatter2dChart();
                    } else if (pageId === 'scatter3dPage') {
                        initScatter3dChart();
                    } else if (pageId === 'linechartPage') {
                        initLineChart();
                    } else if (pageId === 'tablePage') {
                        initTable();
                    }
                });
            });
            
            // 添加员工按钮
            document.getElementById('addBtn').addEventListener('click', function() {
                document.getElementById('modalTitle').textContent = '添加员工';
                document.getElementById('employeeForm').reset();
                document.getElementById('editId').value = '';
                document.getElementById('employeeModal').style.display = 'block';
            });
            
            // 关闭模态框
            document.getElementById('closeModal').addEventListener('click', function() {
                document.getElementById('employeeModal').style.display = 'none';
                hideAlerts();
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(event) {
                const modal = document.getElementById('employeeModal');
                if (event.target === modal) {
                    modal.style.display = 'none';
                    hideAlerts();
                }
            });
            
            // 员工表单提交
            document.getElementById('employeeForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const editId = document.getElementById('editId').value;
                const name = document.getElementById('name').value;
                const age = parseInt(document.getElementById('age').value);
                const gender = document.getElementById('gender').value;
                const department = document.getElementById('department').value;
                const skill = parseInt(document.getElementById('skill').value);
                const efficiency = parseInt(document.getElementById('efficiency').value);
                const collaboration = parseInt(document.getElementById('collaboration').value);
                const hireDate = document.getElementById('hireDate').value;
                
                if (editId) {
                    // 更新员工
                    const index = employees.findIndex(e => e.id === parseInt(editId));
                    if (index !== -1) {
                        employees[index] = {
                            id: parseInt(editId),
                            name,
                            age,
                            gender,
                            department,
                            skill,
                            efficiency,
                            collaboration,
                            hireDate
                        };
                        showAlert('success', '员工信息更新成功!');
                    }
                } else {
                    // 添加新员工
                    const newId = employees.length > 0 ? Math.max(...employees.map(e => e.id)) + 1 : 1;
                    employees.push({
                        id: newId,
                        name,
                        age,
                        gender,
                        department,
                        skill,
                        efficiency,
                        collaboration,
                        hireDate
                    });
                    showAlert('success', '新员工添加成功!');
                }
                
                // 更新表格和图表
                initTable();
                initDashboard();
                
                // 关闭模态框
                document.getElementById('employeeModal').style.display = 'none';
            });
        });
        
        // 显示错误信息
        function showError(elementId, message) {
            const errorElement = document.getElementById(elementId);
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }
        
        // 隐藏错误信息
        function hideError(elementId) {
            const errorElement = document.getElementById(elementId);
            errorElement.textContent = '';
            errorElement.style.display = 'none';
        }
        
        // 清除所有认证错误
        function clearAuthErrors() {
            document.querySelectorAll('.error-message').forEach(el => {
                el.textContent = '';
                el.style.display = 'none';
            });
        }
        
        // 显示提示信息
        function showAlert(type, message) {
            const alertElement = type === 'success' ? 
                document.getElementById('successAlert') : 
                document.getElementById('errorAlert');
                
            alertElement.textContent = message;
            alertElement.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                alertElement.style.display = 'none';
            }, 3000);
        }
        
        // 隐藏所有提示
        function hideAlerts() {
            document.getElementById('successAlert').style.display = 'none';
            document.getElementById('errorAlert').style.display = 'none';
        }
        
        // 初始化数据概览图表
        function initDashboard() {
            // 按部门统计人数
            const departmentCounts = employees.reduce((acc, emp) => {
                acc[emp.department] = (acc[emp.department] || 0) + 1;
                return acc;
            }, {});
            
            // 计算平均评分
            const avgSkill = employees.reduce((sum, emp) => sum + emp.skill, 0) / employees.length;
            const avgEfficiency = employees.reduce((sum, emp) => sum + emp.efficiency, 0) / employees.length;
            const avgCollaboration = employees.reduce((sum, emp) => sum + emp.collaboration, 0) / employees.length;
            
            // 创建图表数据
            const trace1 = {
                x: Object.keys(departmentCounts),
                y: Object.values(departmentCounts),
                type: 'bar',
                name: '部门人数',
                marker: { color: '#2575fc' }
            };
            
            const trace2 = {
                x: ['技能评分', '效率评分', '协作评分'],
                y: [avgSkill, avgEfficiency, avgCollaboration],
                type: 'bar',
                name: '平均评分',
                marker: { color: '#4CAF50' }
            };
            
            const data = [trace1, trace2];
            
            const layout = {
                title: '员工数据概览',
                barmode: 'group',
                height: 400
            };
            
            Plotly.newPlot('dashboardChart', data, layout);
        }
        
        // 初始化二维散点图
        function initScatter2dChart() {
            // 按部门分组
            const departments = [...new Set(employees.map(emp => emp.department))];
            
            const traces = departments.map(dept => {
                const deptEmployees = employees.filter(emp => emp.department === dept);
                return {
                    x: deptEmployees.map(emp => emp.skill),
                    y: deptEmployees.map(emp => emp.efficiency),
                    mode: 'markers',
                    type: 'scatter',
                    name: dept,
                    marker: { size: 12 }
                };
            });
            
            const layout = {
                title: '员工技能与效率评分关系',
                xaxis: { title: '技能评分' },
                yaxis: { title: '效率评分' },
                height: 400
            };
            
            Plotly.newPlot('scatter2dChart', traces, layout);
        }
        
        // 初始化三维散点图
        function initScatter3dChart() {
            // 按部门分组
            const departments = [...new Set(employees.map(emp => emp.department))];
            
            const traces = departments.map(dept => {
                const deptEmployees = employees.filter(emp => emp.department === dept);
                return {
                    x: deptEmployees.map(emp => emp.skill),
                    y: deptEmployees.map(emp => emp.efficiency),
                    z: deptEmployees.map(emp => emp.collaboration),
                    mode: 'markers',
                    type: 'scatter3d',
                    name: dept,
                    marker: { size: 8 }
                };
            });
            
            const layout = {
                title: '员工三维能力分析',
                scene: {
                    xaxis: { title: '技能评分' },
                    yaxis: { title: '效率评分' },
                    zaxis: { title: '协作评分' }
                },
                height: 400
            };
            
            Plotly.newPlot('scatter3dChart', traces, layout);
        }
        
        // 初始化折线图
        function initLineChart() {
            // 按日期分组
            const dates = [...new Set(employees.map(emp => emp.hireDate))].sort();
            
            const skillAvg = dates.map(date => {
                const dayEmployees = employees.filter(emp => emp.hireDate === date);
                return dayEmployees.reduce((sum, emp) => sum + emp.skill, 0) / dayEmployees.length;
            });
            
            const efficiencyAvg = dates.map(date => {
                const dayEmployees = employees.filter(emp => emp.hireDate === date);
                return dayEmployees.reduce((sum, emp) => sum + emp.efficiency, 0) / dayEmployees.length;
            });
            
            const collaborationAvg = dates.map(date => {
                const dayEmployees = employees.filter(emp => emp.hireDate === date);
                return dayEmployees.reduce((sum, emp) => sum + emp.collaboration, 0) / dayEmployees.length;
            });
            
            const trace1 = {
                x: dates,
                y: skillAvg,
                mode: 'lines+markers',
                name: '技能评分'
            };
            
            const trace2 = {
                x: dates,
                y: efficiencyAvg,
                mode: 'lines+markers',
                name: '效率评分'
            };
            
            const trace3 = {
                x: dates,
                y: collaborationAvg,
                mode: 'lines+markers',
                name: '协作评分'
            };
            
            const data = [trace1, trace2, trace3];
            
            const layout = {
                title: '员工评分趋势',
                xaxis: { title: '入职日期' },
                yaxis: { title: '平均评分' },
                height: 400
            };
            
            Plotly.newPlot('lineChart', data, layout);
        }
        
        // 初始化表格
        function initTable() {
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';
            
            employees.forEach(emp => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${emp.id}</td>
                    <td>${emp.name}</td>
                    <td>${emp.age}</td>
                    <td>${emp.gender === 'M' ? '男' : '女'}</td>
                    <td>${emp.department}</td>
                    <td>${emp.skill}</td>
                    <td>${emp.efficiency}</td>
                    <td>${emp.collaboration}</td>
                    <td>${emp.hireDate}</td>
                    <td>
                        <button class="btn btn-edit" data-id="${emp.id}">
                            <i class="fa fa-pencil"></i> 编辑
                        </button>
                        <button class="btn btn-delete" data-id="${emp.id}">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    </td>
                `;
                tableBody.appendChild(row);
            });
            
            // 添加编辑按钮事件
            document.querySelectorAll('.btn-edit').forEach(btn => {
                btn.addEventListener('click', function() {
                    const id = parseInt(this.getAttribute('data-id'));
                    const emp = employees.find(e => e.id === id);
                    
                    if (emp) {
                        document.getElementById('modalTitle').textContent = '编辑员工';
                        document.getElementById('editId').value = emp.id;
                        document.getElementById('name').value = emp.name;
                        document.getElementById('age').value = emp.age;
                        document.getElementById('gender').value = emp.gender;
                        document.getElementById('department').value = emp.department;
                        document.getElementById('skill').value = emp.skill;
                        document.getElementById('efficiency').value = emp.efficiency;
                        document.getElementById('collaboration').value = emp.collaboration;
                        document.getElementById('hireDate').value = emp.hireDate;
                        document.getElementById('employeeModal').style.display = 'block';
                    }
                });
            });
            
            // 添加删除按钮事件
            document.querySelectorAll('.btn-delete').forEach(btn => {
                btn.addEventListener('click', function() {
                    const id = parseInt(this.getAttribute('data-id'));
                    if (confirm('确定要删除这名员工吗？')) {
                        employees = employees.filter(e => e.id !== id);
                        initTable();
                        initDashboard();
                        showAlert('success', '员工已删除!');
                    }
                });
            });
        }
    </script>
</body>
</html>